<template>
  <div class="">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <splitpanes :first-splitter="true" class="default-theme">
      <pane min-size="10" size="20"> 1</pane>
      <pane min-size="20">
        <div class="main">
          <div>2-1</div>
          <div style="text-align: right">2-2</div>
        </div>
      </pane>
      <pane min-size="20" size="20"> 3</pane>
    </splitpanes>
    <!-- <el-table :data="tableData" style="width: 100%; height: 100px">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <div>
      <a href="#" class="show-pop btn btn-danger" data-placement="bottom">pop bottom</a>
    </div>
    <div>
      <a href="#" class="show-pop btn btn-danger" data-placement="right">pop right</a>
    </div>
    <div style="margin-top: 15px">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div> -->
  </div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
  name: "",
  props: {},
  components: { Splitpanes, Pane },
  computed: {},
  data() {
    return {
      leftSize: "",
      rightSize: "",
      centerSize: "",
      input3: "",
      select: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  created() {
    this.leftSize = (250 / window.innerWidth) * 100;
    this.rightSize = (400 / window.innerWidth) * 100;
    this.centerSize = (1000 / window.innerWidth) * 100;
    console.log("leftWidth", this.leftSize);
  },
  mounted() {
    var settings = {
      trigger: "click", //click / hover
      title: "Pop TitlePop TitlePop TitlePop TitlePop Title",
      content: "<p>This is webui popover demo.</p><p>just enjoy it and have fun !</p>",
      width: 300,
      multi: false, //是否可以展示多个
      closeable: true, //关闭按钮
      style: "", //defalut / inverse(黑色)
      padding: true,
      arrow: true, //是否展示箭头
    };
    $("a.show-pop").webuiPopover("destroy").webuiPopover(settings);
  },
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.default-theme {
  height: 100vh;
}
.main {
  width: 1000px;
  height: 200%;
  overflow: auto;
  background: pink;
}
.splitpanes__pane {
  overflow: auto;
}
</style>
